<template>
	<view :class="['representative-card-root', `auth-type-${authType}`]">
		<view class="title-container">
			<view :class="['logo-container', `auth-type-${authType}`]"></view>
			<view class="title-txt title-content">
				{{ title }}
			</view>
		</view>
		<view class="user-info-container">
			<view class="card-name">
				{{ cardName }}
			</view>
			<view class="user-avatar">
				<image :src="userInfo.avatar" style="width: 100%; height: 100%;" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		initUserInfo
	} from "@/service/user";
	import {
		getFileAccessHttpUrl
	} from "@/util/fileUtil";

	export default {
		name: "representativeCard",
		props: {
			authType: {
				type: [String, Number]
			}
		},
		data() {
			return {
				userInfo: {},
				title: '',
				cardName: ''
			}
		},
		created() {
			let owner = this
			let {
				authType
			} = this
			initUserInfo().then(userInfo => {
				owner.userInfo = userInfo
				owner.userInfo.avatar = owner.userInfo.avatar != null && owner.userInfo.avatar !== '' ?
					getFileAccessHttpUrl(owner.userInfo.avatar) : '/static/img/avatar.png'
				let [cardFieldName, titleFiledName] = ['', '']
				switch (authType) {
					case '1':
					case 1:
						cardFieldName = 'npcAuthCardName'
						titleFiledName = 'npcAuthName'
						break
					case '2':
					case 2:
						cardFieldName = 'govAuthCardName'
						titleFiledName = 'govAuthName'
						break
					case '3':
					case 3:
						cardFieldName = 'partyAuthCardName'
						titleFiledName = 'partyAuthName'
						break
				}
				owner.title = userInfo[titleFiledName]
				owner.cardName = userInfo[cardFieldName]
			})
		},
	}
</script>

<style scoped lang="scss">
	.representative-card-root {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 400rpx;
		background-size: 100% 100%;
		border-radius: $border-radius-lg;
		box-sizing: border-box;
		padding: 50rpx 70rpx;

		&.auth-type-1 {
			background-image: url("/static/img/home/documents.png");

			.card-name,
			.title-txt {
				color: #000;
			}
		}

		&.auth-type-2 {
			background-image: url("/static/img/home/cppccDelegate.png");

			.card-name,
			.title-txt {
				color: #fff;
			}
		}

		&.auth-type-3 {
			background-image: url("/static/img/home/partyRepresentative.png");

			.card-name,
			.title-txt {
				color: #fff;
			}
		}

		.title-container {
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: flex-start;

			.logo-container {
				width: 140rpx;
				height: 140rpx;
				background-size: 100% 100%;
				margin-right: 50rpx;


				&.auth-type-1 {
					background-image: url("/static/img/home/documents-logo.png");
				}

				&.auth-type-2 {
					background-image: url("/static/img/home/cppccDelegate-logo.png");
				}

				&.auth-type-3 {
					background-image: url("/static/img/home/partyRepresentative-logo.png");
				}
			}

			.title-txt {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 35rpx;
				letter-spacing: 5rpx;
			}
		}

		.user-info-container {
			width: 100%;
			height: 260rpx;
			display: flex;
			justify-content: space-between;

			.card-name {
				width: calc(100% - 200rpx);
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				font-weight: 600;
				font-size: 80rpx;
				letter-spacing: 30rpx;
				overflow-wrap: break-word;
				word-break: break-all;
				white-space: pre-wrap;
			}

			.user-avatar {
				width: 200rpx;
				height: 200rpx;

				// image {
				// 	width: 100%;
				// 	height: 100%;
				// }
			}
		}
	}
</style>